.s-xguide-down{
    position:absolute;
    bottom:80px;
    left:50%;
    margin-left:-25px;
    width:50px;
    height:50px;
    display:inline-block;
    background:url("../images/s_xman_guide_f3aebfe5.png") no-repeat -21px -3px;
    _background:none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./s_xguide_down_ie_a343e020.png",enabled=true,sizingMethod="crop");
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    -o-border-radius:50%;
    opacity:.7;
    cursor:pointer
}
@keyframes xguide_down{
    0%,100%{
        transform:scale(0.0);
        -moz-transform:scale(0.0);
        -o-transform:scale(0.0);
        -webkit-transform:scale(0.0);
        -ms-transform:scale(0.0);
        opacity:0
    }
    50%{
        transform:scale(1.0);
        -moz-transform:scale(1.0);
        -o-transform:scale(1.0);
        -webkit-transform:scale(1.0);
        -ms-transform:scale(1.0);
        opacity:1
    }

}
@-webkit-keyframes xguide_down{
    0%,100%{
        -webkit-transform:scale(0.0);
        -moz-transform:scale(0.0);
        -o-transform:scale(0.0);
        -ms-transform:scale(0.0);
        transform:scale(0.0);
        opacity:0
    }
    50%{
        -webkit-transform:scale(1.0);
        -moz-transform:scale(1.0);
        -o-transform:scale(1.0);
        -ms-transform:scale(1.0);
        transform:scale(1.0);
        opacity:1
    }

}
@-moz-keyframes xguide_down{
    0%,100%{
        -moz-transform:scale(0.0);
        -o-transform:scale(0.0);
        -webkit-transform:scale(0.0);
        -ms-transform:scale(0.0);
        transform:scale(0.0);
        opacity:0
    }
    50%{
        -moz-transform:scale(1.0);
        -o-transform:scale(1.0);
        -webkit-transform:scale(1.0);
        -ms-transform:scale(1.0);
        transform:scale(1.0);
        opacity:1
    }

}
@-o-keyframes xguide_down{
    0%,100%{
        -o-transform:scale(0.0);
        -moz-transform:scale(0.0);
        -webkit-transform:scale(0.0);
        -ms-transform:scale(0.0);
        transform:scale(0.0);
        opacity:0
    }
    50%{
        -o-transform:scale(1.0);
        -moz-transform:scale(1.0);
        -webkit-transform:scale(1.0);
        -ms-transform:scale(1.0);
        transform:scale(1.0);
        opacity:1
    }

}
.s-xguide-down.trans{
    -webkit-animation:xguide_down 4.0s infinite ease-in-out;
    -moz-animation:xguide_down 4.0s infinite ease-in-out;
    -o-animation:xguide_down 4.0s infinite ease-in-out;
    animation:xguide_down 4.0s infinite ease-in-out
}
.s-xguide-down.arrow-1{
    animation-delay:-2.0s;
    -webkit-animation-delay:-2.0s;
    -moz-animation-delay:-2.0s;
    -o-animation-delay:-2.0s
}

////1////
.arrow-1{
    &:before{
        content:"";
        position: absolute;
        top: 0;
        left: 50%;
        width: 24px;
        height: 24px;
        margin-left: -12px;
        border-left: 1px solid #fff;
        border-bottom: 1px solid #fff;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        box-sizing: border-box;
    }
}

////2////
.arrow-2:after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border: 1px solid #fff;
    border-width: 0 1px 1px 0;
    left: 50%;
    top: 10px;
    -webkit-transform: rotate(45deg) translate(-50%, 0);
    transform: rotate(45deg) translate(-50%, 0);
    -webkit-animation: arrow-2 5s infinite steps(10, end);
    animation: arrow-2 5s infinite steps(10, end)
}
@-webkit-keyframes arrow-2 {
    0%{
        opacity: 0.5;
        -webkit-transform-origin: center center;
        -webkit-transform: rotate(45deg) translate(-50%, 0)
    }
    100%{
        opacity: 1;
        -webkit-transform-origin:center center;
        -webkit-transform: rotate(45deg) translate(-50%, 0) scale(2);
        top: 280px
    }
}
@keyframes arrow-2 {
    0% {
        opacity: 0.5;
        transform-origin: center center;
        transform: rotate(45deg) translate(-50%, 0)
    }
    100% {
        opacity: 1;
        transform-origin: center center;
        transform: rotate(45deg) translate(-50%, 0) scale(2);
        top: 280px;
    }
}

////4////
.arrow-4{
    position: absolute;
    top: 0;
    left: 50%;
    width: 46px;
    height: 46px;
    margin-left: -23px;
    border: 1px solid #fff;
    border-radius: 100%;
    box-sizing: border-box;
    &:after {
        position: absolute;
        top: 50%;
        left: 50%;
        content: '';
        width: 16px;
        height: 16px;
        margin: -12px 0 0 -8px;
        border-left: 1px solid #fff;
        border-bottom: 1px solid #fff;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        box-sizing: border-box;
    }
}

////5////
.arrow-5{
    position: absolute;
    top: 0;
    left: 50%;
    width: 46px;
    height: 46px;
    margin-left: -23px;
    border: 1px solid #fff;
    border-radius: 100%;
    box-sizing: border-box;
    &:before {
        position: absolute;
        top: 0;
        left: 0;
        content: '';
        width: 44px;
        height: 44px;
        box-shadow: 0 0 0 0 rgba(255,255,255,.1);
        border-radius: 100%;
        opacity: 0;
        -webkit-animation: sdb03 3s infinite;
        animation: sdb03 3s infinite;
        box-sizing: border-box;
    }
    &:after {
        position: absolute;
        top: 50%;
        left: 50%;
        content: '';
        width: 16px;
        height: 16px;
        margin: -12px 0 0 -8px;
        border-left: 1px solid #fff;
        border-bottom: 1px solid #fff;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        box-sizing: border-box;
    }
}
@-webkit-keyframes sdb03 {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    60% {
        box-shadow: 0 0 0 60px rgba(255,255,255,.1);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes sdb03 {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    60% {
        box-shadow: 0 0 0 60px rgba(255,255,255,.1);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

////6////
.arrow-6 {
    position: absolute;
    top: 0;
    left: 50%;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: sdb04 2s infinite;
    animation: sdb04 2s infinite;
    box-sizing: border-box;
}
@-webkit-keyframes sdb04 {
    0% {
        -webkit-transform: rotate(-45deg) translate(0, 0);
    }
    20% {
        -webkit-transform: rotate(-45deg) translate(-10px, 10px);
    }
    40% {
        -webkit-transform: rotate(-45deg) translate(0, 0);
    }
}
@keyframes sdb04 {
    0% {
        transform: rotate(-45deg) translate(0, 0);
    }
    20% {
        transform: rotate(-45deg) translate(-10px, 10px);
    }
    40% {
        transform: rotate(-45deg) translate(0, 0);
    }
}


////7////
.arrow-7 {
    position: absolute;
    top: 0;
    left: 50%;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: sdb05 1.5s infinite;
    animation: sdb05 1.5s infinite;
    box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
    0% {
        -webkit-transform: rotate(-45deg) translate(0, 0);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        -webkit-transform: rotate(-45deg) translate(-20px, 20px);
        opacity: 0;
    }
}
@keyframes sdb05 {
    0% {
        transform: rotate(-45deg) translate(0, 0);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: rotate(-45deg) translate(-20px, 20px);
        opacity: 0;
    }
}


////8////
.arrow-8 {
    position: absolute;
    top: 0;
    left: 50%;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg);
    -webkit-animation: sdb06 1.5s infinite;
    animation: sdb06 1.5s infinite;
    box-sizing: border-box;
}
@-webkit-keyframes sdb06 {
    0% {
        -webkit-transform: rotateY(0) rotateZ(-45deg) translate(0, 0);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        -webkit-transform: rotateY(720deg) rotateZ(-45deg) translate(-20px, 20px);
        opacity: 0;
    }
}
@keyframes sdb06 {
    0% {
        transform: rotateY(0) rotateZ(-45deg) translate(0, 0);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: rotateY(720deg) rotateZ(-45deg) translate(-20px, 20px);
        opacity: 0;
    }
}


////9////
.arrow-9 span{
    position: absolute;
    top: 0;
    left: 50%;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: sdb07 2s infinite;
    animation: sdb07 2s infinite;
    opacity: 0;
    box-sizing: border-box;
}
.arrow-9 span:nth-of-type(1) {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
.arrow-9 span:nth-of-type(2) {
    top: 16px;
    -webkit-animation-delay: .15s;
    animation-delay: .15s;
}
.arrow-9 span:nth-of-type(3) {
    top: 32px;
    -webkit-animation-delay: .3s;
    animation-delay: .3s;
}
@-webkit-keyframes sdb07 {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes sdb07 {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}


////10////
.arrow-10 {
    position: absolute;
    top: 0;
    left: 50%;
    width: 30px;
    height: 50px;
    margin-left: -15px;
    border: 2px solid #fff;
    border-radius: 50px;
    box-sizing: border-box;
    &:before {
        position: absolute;
        top: 10px;
        left: 50%;
        content: '';
        width: 6px;
        height: 6px;
        margin-left: -3px;
        background-color: #fff;
        border-radius: 100%;
        box-sizing: border-box;
    }
}


////11////
.arrow-11 {
    position: absolute;
    top: 0;
    left: 50%;
    width: 30px;
    height: 50px;
    margin-left: -15px;
    border: 2px solid #fff;
    border-radius: 50px;
    box-sizing: border-box;
    &:before {
        position: absolute;
        top: 10px;
        left: 50%;
        content: '';
        width: 6px;
        height: 6px;
        margin-left: -3px;
        background-color: #fff;
        border-radius: 100%;
        box-sizing: border-box;
    }
    &:after {
        position: absolute;
        bottom: -18px;
        left: 50%;
        width: 18px;
        height: 18px;
        content: '';
        margin-left: -9px;
        border-left: 1px solid #fff;
        border-bottom: 1px solid #fff;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        box-sizing: border-box;
    }
}


////12////
.arrow-12 {
    position: absolute;
    top: 0;
    left: 50%;
    width: 30px;
    height: 50px;
    margin-left: -15px;
    border: 2px solid #fff;
    border-radius: 50px;
    box-sizing: border-box;
    &:before {
        position: absolute;
        top: 10px;
        left: 50%;
        content: '';
        width: 6px;
        height: 6px;
        margin-left: -3px;
        background-color: #fff;
        border-radius: 100%;
        -webkit-animation: sdb10 2s infinite;
        animation: sdb10 2s infinite;
        box-sizing: border-box;
    }
}
@-webkit-keyframes sdb10 {
    0% {
        -webkit-transform: translate(0, 0);
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    80% {
        -webkit-transform: translate(0, 20px);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes sdb10 {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    80% {
        transform: translate(0, 20px);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}


////13////
.arrow-13{                   //居中
    position: absolute;
    left: 50%;
    bottom: 100px;
    color: white;
    &:before,&:after{
        content:"";
        position: absolute;
        width: 20px;
        height: 20px;
        top: 10px;
        -webkit-transform:rotate(45deg);
        border-top: 1px solid white;
        border-left: 1px solid white;
        margin-left: -10px;
        opacity: 0;
        -webkit-animation: up 2s infinite;
        animation: up 2s infinite;
    }
    &:before{
        top: 20px;
    }
    &:after{
        -webkit-animation-delay: .15s;
        animation-delay: .15s;
    }
}
@-webkit-keyframes up{   //动画设置
    0%{
        opacity: 0;
        -webkit-transform: translate(0, 0) rotate(45deg);
        transform: translate(0, 0) rotate(45deg);
    }
    50%{
        opacity: 1;
        -webkit-transform: translate(0, -20px) rotate(45deg);
        transform: translate(0, -20px) rotate(45deg);
    }
    100%{
        opacity: 0;
    }
}
@keyframes up{
    0%{
        opacity: 0;
        -webkit-transform: translate(0, 0) rotate(45deg);
        transform: translate(0, 0) rotate(45deg);
    }
    50%{
        opacity: 1;
        -webkit-transform: translate(0, -20px) rotate(45deg);
        transform: translate(0, -20px) rotate(45deg);
    }
    100%{
        opacity: 0;
    }
}